<template>
  <div class="search-car page_pos_style" :style="{ top: `${phoneStatusBarHeight}`}">
    <!-- 搜索框 -->
    <div class="search-box">
      <div class="left" @click='goBack'>
        <van-icon name="arrow-left" />
      </div>
      <div class="search">
        <van-cell-group>
          <form action="javascript:return true">
            <van-field 
            type="text"
            v-model.trim="value" 
            placeholder="请输入车型"
            :border="false" 
            left-icon="search"
            @keyup.enter="onSearch"
            />
          </form>
        </van-cell-group>
      </div>
      <div class="right" @click="cancel">
        取消
      </div>
    </div>
    <!-- <div class="part-of">所属车系<van-icon class="part-of-i" name="arrow-down" /></div> -->
    <!-- 展示领域 -->
    <!-- <div class="carBox" v-for="item in info" :key="item.vtdId"> -->
      <!-- <van-index-bar> -->
        <!-- <van-index-anchor :index="item.label" /> -->
        <!-- <van-cell
        class="van-cell-box"
        :title="item.vtdName" 
        @click="carItemData(brand)"
        /> -->
      <!-- </van-index-bar> -->
      <div class="page_pos_scroll" :style="{ top: `${phoneStatusBarHeight}`,marginTop:'12vw'}">
        
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        v-show="show"
      >
        <van-cell 
        v-for="item in info" 
        :key="item.vtdId" 
        :title="item.vtdName"
        :value="item.changshangzhidaojiaD"
        @click="carItemData(item)"
        />
      </van-list>
      </div>
    <!-- </div> -->
  </div>
</template>

<script>
import { getvtdNameList } from './api'
export default {
  data() {
    return {
      value:'',
      info: [],
      loading: false,
      finished: false,
      limit: 20,
      page: 1,
      show: false,
        // 获取屏幕状态栏高度
        phoneStatusBarHeight:''
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    // 获取搜索数据
    async onSearch() {
      console.log(this.value)
      this.show = true
      this.info = []
      this.page = 1
      // let vbmName = this.value.replace(/^\s+|\s+$/g, '')
      // let params = {
      //   limit: '10',
      //   page: '1',
      //   vbmName
      // }
      // const {data} = await getAllList(params)
      // let obj = {}
      // data.forEach((item) => {
      //   if (obj[item.initial]) {
      //     obj[item.initial].push(item)
      //   } else {
      //     obj[item.initial] = [item]
      //   }
      // })
      // let arr = Object.keys(obj).map((item) => {
      //   return {
      //     label: item,
      //     options: obj[item]
      //   }
      // })
      // this.info = arr
      let params = {
        limit: this.limit,
        page: this.page,
        vtdName: this.value.replace(/\s+/g,"")
      }
      const res = await getvtdNameList(params)
      res.data.list.forEach(item => {
        let n = item
        n.changshangzhidaojiaD = item.changshangzhidaojia/10000 + '万'
        this.info.push(item)
      });
      if(res.data.currPage === res.data.totalPage) {
        this.finished = true
      }
    },
    // 上拉到底部加载下一页
    async onLoad() {
      this.page ++
      // this.onSearch()
      let params = {
        limit: this.limit,
        page: this.page,
        vtdName: this.value.replace(/\s+/g,"")
      }
      const res = await getvtdNameList(params)
      res.data.list.forEach(item => {
        let n = item
        n.changshangzhidaojiaD = item.changshangzhidaojia/10000 + '万'
        this.info.push(n)
      });
      if(res.data.currPage === res.data.totalPage) {
        this.finished = true
      }
      this.loading = false
    },
    // 选择品牌
    carItemData(item) {
      let vnId = item.vnId
      console.log(item)
      console.log(this.$route.query.myName)
      if (this.$route.query.myName == '/myCar/add') {
        this.$router.push({
          name: this.$route.query.myName,
          query: {
            vnid: vnId,
            vtdId: item.vtdId,
            brand: item.pinpai,
            carType: item.vtdName,
            biId : item.biId,
            idOld: this.$route.query.idOld,
            biName: item.chexi,
            carModelGuidePrice: item.changshangzhidaojia,
            myName:'editBuyCarNotification'
          },
        })
      }else{
        this.$router.push({
          name:
            this.$route.query.myName ||
            localStorage.getItem("carBandPage") ||
            "FindCarForm",
          query: {
            vnid: vnId,
            vtdId: item.vtdId,
            brand: item.pinpai,
            carType: item.vtdName,
            biId : item.biId,
            idOld: this.$route.query.idOld,
            biName: item.chexi,
            carModelGuidePrice: item.changshangzhidaojia,
            myName:'editBuyCarNotification'
          },
        })
      }
    },
    cancel() {
      this.value = '',
      this.show = false
      // this.onSearch()
    }
  },
  mounted() {
    document.querySelector('body').setAttribute('style', 'background-color:white')
  },
  created() {
      // 获取屏幕状态栏高度
      this.phoneStatusBarHeight = window.phoneStatusBarHeight
  },
}
</script>

<style lang='less'>

[class*=van-hairline]::after{
  border: none;
}
.van-index-anchor{
  background-color: rgba(248, 248, 248, .8) !important;
}
</style>
<style scoped lang='less'>
.van-cell__title{
  flex: 2;
}
.search-car{
  // padding: 10px;
  background-color: white;
}
.van-cell-box{
  border-bottom: 1px solid rgba(0,0,0,.1);
}
.carItem{
  display: flex;
  img{
    width: 20px;
    height: 20px;
  }
  
}
  .part-of{
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    border-bottom: 8px solid rgba(248, 248, 248, 1);
  }
  
  .van-icon{
    font-size: 18px;
  }
  .search-box{
    padding: 10px;
    // margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    // height: 44px;
    background-color: white;
    .left,.right{
      // flex: 1;
      // background-color: pink;
      // font-size: 17px;
      // font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
    }
    .left {
      padding-right: 10px;
    }
    .right {
      padding-left: 10px;
    }
    .search{
      flex: 5;
      .van-cell{
        border: none;
        background-color: rgba(248, 248, 248, .8);
        border-radius: 15px;
        padding: 5px;
      }
    }
    
  }
</style>